React Server Components

https://youtu.be/FZ0cG47msEk?t=1434

サーバーでのみ動く

サーバーサイドのデータに直でアクセスできる

よりシンプルなプログラミングモデル

cliant / serverをシームレスに拡張する

clientに送らないといけないコードをかなり減らすことができる

Suspenseを使って実装されている

Next.jsがαサポートしている

https://nextjs.org/docs/advanced-features/react-18/server-components

Next.jsはReact Server ComponentsとSSR streamingを併用して高速化する

https://techlife.cookpad.com/entry/2022/06/21/130736 p.40

Introducing Zero-Bundle-Size React Server Components – React Blog　2020-12-21

https://youtu.be/TQQPAU21ZUw

rfcs/0000-server-components.md at server-components · josephsavona/rfcs · GitHub

PHPやRailsのSSR（昔からあるやつ）はDBに直アクセスしてデータを埋め込んだHTMLを素早く表示できた

SSRは初回のHTML構築でこれができるが、それ以後はクライアントがAPIを叩いてデータフェッチする

RSCはデータフェッチするときにサーバーサイドで処理してtreeをmergeする

SSRを置換するものではない

SSRとの違い

SSR

初期のHTMLをサーバーサイドで行う

その後はクライアントのJSで処理

つまり全てのJSがクライアントに送出される

React Server Components

レンダリングされるまでクライアントに送られない

DBからデータをフェッチするコンポーネント

再レンダリングが必要になったらre-fetch後に既存のcomponent treeにmergeされる

https://gyazo.com/ba8815055ea9afb2679dd2d961ab3e4c

Will React Server Components Replace SSR? | by Charuka Herath | Better Programming

クライアントでの処理が重いものとかに使える

https://techlife.cookpad.com/entry/2022/06/21/130736 p.35

これによって、renderをclient/serverどちらで行うかを、コンポーネント単位で決められるようになった

開発者が意識せずともブラウザでダウンロード・実行されるJSが減る

React Server Components はウェブ開発を変えるゲームチェンジングな技術である 2021/01/03

React Server Components を使う限り、もはや SSR or CSR（SPA）という議論は意味を無くします。両方のいいところどりができて、面倒な部分はライブラリやフレームワークが対処してくれて、しかもファイル名を変えるだけで実現でき共存するため、利用者が意識をすることもなくなるでしょう

たとえば、多くのウェブサービスでは、認証APIを叩いて、ユーザー情報APIを叩いて、ほげほげAPIを叩いてというふうに、複数の API を叩くことになります。ところがウェブブラウザは1つのサイトに対して最大同時アクセス数は極めて小さな数字に制限されています（制限されていないとDoSになってしまうため）。

認証APIはさすがにどうやっても待たないといけないでしょう。そういったものはどうしようもありませんが、それ以外のリソースは同時にアクセスしても良いと思いませんか？

React Server Components では API 呼び出しをサーバーコンポーネント上に記述することで、ウェブブラウザとは異なり、同時アクセスはサーバーのリソースが許す限り並列に行えます。そして、それらが完了してるかどうか？の面倒な処理も React suspenseの仕組みに乗っかることができます。